<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="Cache-Control" content="no-store, no-cache, must-revalidate, max-age=0" />
	<meta http-equiv="Pragma" content="no-cache" />


	<link rel="stylesheet" type="text/css" href="style.css"/>
	
    <title>Ecommerce Sample Application</title>
	<script type="text/javascript" src="./lib/jquery/jquery-1.3.2.min.js"></script>
	<script type="text/javascript" src="./lib/ng/Main.js"></script>
	
</head>
<body>
	
	<!-- ########################################################################### -->
	<!-- Templates -->
	<!-- ########################################################################### -->
	<div id="templates"  style="display:none">


		<!-- Categories ///////////////////// -->
		<div name="categories">
			<ul>
				<li></li>
			</ul>
		</div>


		<!-- Products ///////////////////// -->
		<div name="products">
			<div name="product">
				<p name="name"></p>
				<p name="description"></p>
				<p>Tax: <span name="tax"></span></p>

				<table border="1">
					<tr name="productSpecifics">
						<td name="productSpecific">
							<p name="reference"></p>
							<p name="description"></p>
							<p>Price: <span name="price"></span></p>
							<input type="button" name="addToCart" value="Add to cart" />
						</td>
					</tr>
				</table>

				<hr />
			</div>
		</div>


		<!-- Carts ///////////////////// -->
		<div name="cart">

			<table border="1" name="cartItems">
				<tr name="cartItem">
					<td name="name"></td>
					<td name="reference"></td>
					<td name="quantity"></td>
					<td name="tax"></td>
					<td name="price"></td>
					<td><input type="button" name="removeFromCart" value="Remove from cart" /></td>
				</tr>
			</table>
		</div>


		<!-- Order ///////////////////// -->
		<div name="order">

			<table border="1" name="orderItems">
				<tr name="orderItem">
					<td name="name"></td>
					<td name="reference"></td>
					<td name="quantity"></td>
					<td name="tax"></td>
					<td name="price"></td>
				</tr>
			</table>
						
			<table border="1">
				<tr>
					<td>Total</td>
					<td name="priceSum"></td>
				</tr>
				<tr>
					<td>Taxes</td>
					<td name="taxSum"></td>
				</tr>
				<tr>
					<td>Delivery</td>
					<td name="deliveryCost"></td>
				</tr>
				
				<tr>
					<td>Total</td>
					<td name="total"></td>
				</tr>
				
			</table>			
			
		</div>


	</div>
	<!-- ########################################################################### -->
	<!-- ########################################################################### -->
	
	
	<select id="languageCombobox"><option>en</option><option>fr</option></select>
	

	<!-- content ///////////////////// -->
	<div id="content" style="display:none">
		
		<!-- categories ///////////////////// -->
		<div name="categories"></div>
		
		<!-- Products ///////////////////// -->		
		<h4>Products</h4>
		<div name="products"></div>
		
		<!-- Cart ///////////////////// -->
		<h4>Cart</h4>
		<div name="cart"></div>
		
		<input id="viewCartButton" type="button" name="View Cart" value="View Cart" />
		<input id="hideCartButton" type="button" name="Hide Cart" value="Hide Cart" />
		
		<input id="checkoutButton" type="button" name="Checkout" value="Checkout" />
		
		
	</div>

	<!-- Checkout ///////////////////// -->
	<div id="checkout" style="display:none">
		
		<!-- signInForm ///////////////////// -->
		<div id="signIn">
		 	<form>
				<img src="http://openid.net/wp-content/uploads/2007/10/openid_med_logo_text.png" width="84" height="28"/> <input type="text" name="openId" />
				<input type="button" id="loginButton" value="Sign In" />
				<input type="button" id="googleOpenIDButton" value="Google" />
				<input type="button" id="yahooOpenIDButton" value="Yahoo" />
			</form>
		</div>
		

		<!-- customerForm ///////////////////// -->
		<div id="customer">
			<h5>Update customer account</h5>
		 	<form id="customerForm">
		 		<table>
		 			<tr>
			 			<td>FistName</td>
						<td><input type="text" name="firstname" /></td>
					</tr>
		 			<tr>
			 			<td>LastName</td>
						<td><input type="text" name="lastname" /></td>
					</tr>
		 			<tr>
			 			<td>Email</td>
						<td><input type="text" name="email" /></td>
					</tr>


					<tr>
						<td>Shipping Address</td>
						<td>
					 		<table name="shippingAddress">
					 			<tr>
						 			<td>Street 1</td>
									<td><input type="text" name="street1" /></td>
								</tr>
					 			<tr>
						 			<td>Street 2</td>
									<td><input type="text" name="street2" /></td>
								</tr>
					 			<tr>
						 			<td>City</td>
									<td><input type="text" name="city" /></td>
								</tr>
					 			<tr>
						 			<td>ZipCode</td>
									<td><input type="text" name="zipCode" /></td>
								</tr>
					 			<tr>
						 			<td>Phone</td>
									<td><input type="text" name="phone" /></td>
								</tr>
								
							</table>							
						</td>
					</tr>
					<tr>
						<td>Billing Address</td>
						<td>
					 		<table name="billingAddress">
					 			<tr>
						 			<td>Street 1</td>
									<td><input type="text" name="street1" /></td>
								</tr>
					 			<tr>
						 			<td>Street 2</td>
									<td><input type="text" name="street2" /></td>
								</tr>
					 			<tr>
						 			<td>City</td>
									<td><input type="text" name="city" /></td>
								</tr>
					 			<tr>
						 			<td>ZipCode</td>
									<td><input type="text" name="zipCode" /></td>
								</tr>
					 			<tr>
						 			<td>Phone</td>
									<td><input type="text" name="phone" /></td>
								</tr>
								
							</table>							
						</td>
					</tr>

		 			<tr>
			 			<td></td>
						<td><input type="submit" name="updateCustomer" value="Update" /></td>
					</tr>

	 			</table>
				
			</form>
		</div>
		
		
		
		<!-- Order ///////////////////// -->
		<h4>Order</h4>
		<div name="order"></div>
		
		<input id="payButton" type="button" name="Pay" value="Pay" />
	</div>
				
	
</body>
</html>
